<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>实例操作- 手风琴</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		box-sizing: content-box;
	}
	body {
		padding: 30px;
	}
	.slide {
		width: 300px;
		display: flex;
		flex-direction: column;
		/* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
	}
	.slide dt {
		height: 30px;
		background: #34495e;
		color: white;
		display: flex;
		align-items: center;
		padding-left: 10px;
		cursor: pointer;
	}
	.slide dt:first-of-type {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.slide dd {
		height: 100px;
		background: #f1c40f;
		overflow: hidden;
	}
	.slide dd div {
		padding: 10px;
	}
	.slide dd:last-of-type {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
</style>
</head>
<body>
	<div class="container">
		<h1>实例操作- 手风琴</h1>
	</div>

	<div class="slide s1">
		<dt>后盾人</dt>
		<dd>
			<div>houdunren.com</div>
		</dd>
		<dt>后盾CMS</dt>
		<dd>
			<div>hdcms1.com</div>
		</dd>
		<dt>百度</dt>
		<dd>
			<div>baidu.com</div>
		</dd>
		<dt>腾讯</dt>
		<dd>
			<div>qq.com</div>
		</dd>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
		class Animation {
			constructor(el) {
				this.el = el;
				this.timeout = 5;
				this.isShow = true;
				this.defaultHeight = this.height;
			}
			hide(callback) {
				this.isShow = false;
				let id = setInterval(() => {
					if (this.height <= 0) {
						clearInterval(id);
						callback && callback();
						return;
					}
					this.height = this.height - 1;
				}, this.timeout);
			}
			show(callback) {
				this.isShow = false;
				let id = setInterval(() => {
					if (this.height >= this.defaultHeight) {
						clearInterval(id);
						callback && callback();
						return;
					}
					this.height = this.height + 1;
				}, this.timeout);
			}
			get height() {
				return window.getComputedStyle(this.el).height.slice(0, -2) * 1;
			}
			set height(height) {
				this.el.style.height = height + "px";
			}
		}
		class Slide {
			constructor(el) {
				this.el = document.querySelector(el);
				this.links = this.el.querySelectorAll("dt");
				this.panels = [...this.el.querySelectorAll("dd")].map(
					item => new Panel(item)
					);
				this.bind();
			}
			bind() {
				this.links.forEach((item, i) => {
					item.addEventListener("click", () => {
						this.action(i);
					});
				});
			}
			action(i) {
				// console.log(Panel.filter(this.panels, i), this.panels)
				Panel.hideAll(Panel.filter(this.panels, i), () => {
					this.panels[i].show();
				});
			}
		}

		class Panel extends Animation {
			static num = 0;
			static hideAll(items, callback) {
				if (Panel.num > 0) return;
				items.forEach(item => {
					Panel.num++;
					item.hide(() => {
						Panel.num--;
					});
				});
				callback && callback();
			}
			static filter(items, i) {
				return items.filter((item, index) => index != i);
			}
		}
		let hd = new Slide(".s1");





	</script>
</body>
</html>